
<template>
    <h1>vue3一个人的信息</h1>
    <h1>姓名：{{name}}</h1>
    <h1>年龄：{{age}}</h1>
    <br>
    <h1>工作种类：{{job.type}}</h1>
    <h1>工作薪水：{{job.salary}}</h1>
    <button @click="changeInfo2">修改个人信息</button>

</template>
<script>
import {ref} from 'vue'
export default {
  /**
   * 响应式入门
   * ref 函数
   *
   *
   */
  name: 'helloWord2',
  // // 测试 ，暂时不考虑响应式
  setup(){
    let name = ref('张三')
    let age = ref(18)
    let job = ref({
      type:'前端工程师',
      salary:'30k'
    })
    /**
     * 数据劫持 引入 ref
     * 引用实现对象
     * 基础类型  通过原型对象查找 object.defineProperty()的get和set完成的
     */
    function changeInfo1(){
     //1 Refimpl reference implement 引用实现
      name.value=`李四`
    }
    /**
     * 对象类型使用 reactive  底层是 proxy(es6)
     * 在第一层使用.value
     *
     */
    function changeInfo2(){
      console.log(job)
      job.value.type=`UI设计师`
    }
    return{
      name,
      age,
      job,
      changeInfo1,
      changeInfo2
    }
  },

}
</script>
<style scoped>
a {
  color: #42b983;
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}
</style>
